<template>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <search />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in banner" :key="item.id">
        <img :src="item.img_url" :alt="item.title" />
      </van-swipe-item>
    </van-swipe>
    <van-grid column-num="3" clickable>
      <van-grid-item
        v-for="item in recommended"
        :icon="item.cover_url"
        :key="item.id"
        :text="item.description | cut"
      />
    </van-grid>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      offset="50"
      v-if="
        goods.sales.list.length &&
        goods.recommend.list.length &&
        goods.new.list.length
      "
    >
      <slidebar :items="goods" @data="getActive" />
    </van-list>
    <tabbar />
    <goup />
  </van-pull-refresh>
</template>

<script>
import Tabbar from '@components/Tabbar'
import Search from '@components/Search'
import Slidebar from './components/Slidebar'
import Goup from '@components/GoTop'
import { fetchBanner, getHomegood } from '@api/home'
export default {
  data () {
    return {
      banner: [],
      recommended: [],
      isLoading: false,
      goods: {
        sales: { page: 1, list: [] },
        recommend: { page: 1, list: [] },
        new: { page: 1, list: [] }
      },
      loading: false,
      finished: false,
      activedata: 0,
      model: ''
    }
  },
  created () {
    this.fetchBanner()
    this.getHomegood()
  },
  filters: {
    cut (val) {
      return val.split('/')[1]
    }
  },
  methods: {
    getActive (active) {
      this.finished = false
      this.activedata = active
    },
    onRefresh () {
      this.getHomegood()
      this.finished = false
      this.goods = {
        sales: { page: 1, list: [] },
        recommend: { page: 1, list: [] },
        new: { page: 1, list: [] }
      }
    },
    onLoad () {
      switch (this.activedata) {
        case 0:
          this.model = 'sales'
          break
        case 1:
          this.model = 'recommend'
          break
        case 2:
          this.model = 'new'
          break
      }
      this.goods[this.model].page++
      getHomegood(this.model, this.goods[this.model].page).then((res) => {
        if (!res.data.goods.data.length) {
          this.finished = true
        }
        if (res.status === 200) {
          this.goods[this.model].list = [...this.goods[this.model].list, ...res.data.goods.data]
          this.loading = false
        }
      })
    },
    fetchBanner () {
      fetchBanner().then((res) => {
        if (res.status === 200) {
          this.banner = res.data.slides
          this.recommended = res.data.goods.data.splice(0, 6)
        }
      })
    },
    getHomegood () {
      getHomegood('sales', this.goods.sales.page).then((res) => {
        if (res.status === 200) {
          this.goods.sales.list = res.data.goods.data
        }
      })
      getHomegood('recommend', this.goods.recommend.page).then((res) => {
        if (res.status === 200) {
          this.goods.recommend.list = res.data.goods.data
        }
      })
      getHomegood('new', this.goods.new.page).then((res) => {
        if (res.status === 200) {
          this.goods.new.list = res.data.goods.data
          this.isLoading = false
        }
      })
    }
  },
  components: { Tabbar, Search, Slidebar, Goup }
}
</script>

<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  margin-top: 54px;
  left: 0;
  color: #fff;
  text-align: center;
  img {
    width: 100%;
  }
}
.van-icon {
  width: 50px;
  height: 50px;
  img {
    width: 100%;
    height: 100%;
  }
}
/deep/ .van-list__loading {
  margin-bottom: 50px;
}
</style>
